<template>
  <div class="animate-fadeIn">
    <div class="mb-6">
      <h2 class="text-2xl font-bold cyber-text mb-2">设备进程管理</h2>
      <p class="text-gray-400">监控和管理设备上运行的进程</p>
    </div>
    
    <div class="glass-effect rounded-xl p-6 tech-card">
      <div class="flex justify-between items-center mb-6">
        <h3 class="text-lg font-bold cyber-text flex items-center">
          <i class="fas fa-list mr-2"></i>运行进程列表
        </h3>
        <div class="flex space-x-4">
          <select class="px-4 py-2 bg-gray-800/50 border border-gray-600 rounded-lg text-white">
            <option>测试服务器-001</option>
            <option>测试服务器-002</option>
          </select>
          <button class="cyber-button px-4 py-2 text-white rounded-lg">
            <i class="fas fa-sync mr-2"></i>刷新
          </button>
        </div>
      </div>
      
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead>
            <tr class="border-b border-gray-700">
              <th class="text-left py-3 px-4 text-gray-300">PID</th>
              <th class="text-left py-3 px-4 text-gray-300">进程名称</th>
              <th class="text-left py-3 px-4 text-gray-300">CPU%</th>
              <th class="text-left py-3 px-4 text-gray-300">内存%</th>
              <th class="text-left py-3 px-4 text-gray-300">运行时间</th>
              <th class="text-left py-3 px-4 text-gray-300">状态</th>
              <th class="text-left py-3 px-4 text-gray-300">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b border-gray-700/50 hover:bg-gray-800/30">
              <td class="py-3 px-4 text-tech-blue font-mono">12345</td>
              <td class="py-3 px-4 text-white">web_test_runner.py</td>
              <td class="py-3 px-4 text-yellow-400">25.3%</td>
              <td class="py-3 px-4 text-blue-400">12.8%</td>
              <td class="py-3 px-4 text-gray-400">05:23</td>
              <td class="py-3 px-4">
                <span class="text-green-400 flex items-center">
                  <span class="status-indicator online w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                  运行中
                </span>
              </td>
              <td class="py-3 px-4">
                <div class="flex space-x-2">
                  <button class="text-yellow-400 hover:text-yellow-300" title="暂停">
                    <i class="fas fa-pause"></i>
                  </button>
                  <button class="text-red-400 hover:text-red-300" title="终止">
                    <i class="fas fa-stop"></i>
                  </button>
                  <button class="text-tech-blue hover:text-tech-purple" title="详情">
                    <i class="fas fa-info"></i>
                  </button>
                </div>
              </td>
            </tr>
            <tr class="border-b border-gray-700/50 hover:bg-gray-800/30">
              <td class="py-3 px-4 text-tech-blue font-mono">12346</td>
              <td class="py-3 px-4 text-white">api_performance_test</td>
              <td class="py-3 px-4 text-yellow-400">8.1%</td>
              <td class="py-3 px-4 text-blue-400">5.2%</td>
              <td class="py-3 px-4 text-gray-400">02:45</td>
              <td class="py-3 px-4">
                <span class="text-green-400 flex items-center">
                  <span class="status-indicator online w-2 h-2 bg-green-400 rounded-full mr-2"></span>
                  运行中
                </span>
              </td>
              <td class="py-3 px-4">
                <div class="flex space-x-2">
                  <button class="text-yellow-400 hover:text-yellow-300" title="暂停">
                    <i class="fas fa-pause"></i>
                  </button>
                  <button class="text-red-400 hover:text-red-300" title="终止">
                    <i class="fas fa-stop"></i>
                  </button>
                  <button class="text-tech-blue hover:text-tech-purple" title="详情">
                    <i class="fas fa-info"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 设备进程管理页面
</script>

